<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <form action="">
        用户名：<input type="text" id="username" name="username" /><br /> 密码： <input type="password" id="password" name="password" /><br />
        <button>登录</button>
    </form>
    <script>
        document.querySelector("form").onsubmit = function(e) {
            e.preventDefault();

            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;

            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                let res = JSON.parse(xhr.responseText);
                alert(res.msg);
                if (res.status === 2000) {
                    location.href = "./index.html";
                }
            };
            xhr.open("post", "http://localhost:3000/api/login");
            xhr.setRequestHeader(
                "Content-Type",
                "application/x-www-form-urlencoded"
            );
            xhr.send("username=" + username + "&password=" + password);
        };
    </script>
</body>

</html>